<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <p class="p">段落</p>
</body>
<script>
    // var div = document.createElement("div");
    // console.log(div);
    // div.innerHTML = "这是新创建的div"
    // div.style.background = "red";
    // document.body.appendChild(div);
    
    // =======

    // var div2 = document.createElement("div");
    // var op = document.querySelector(".p")
    // 父元素.insertBefore(新节点, 老节点);
    // document.body.insertBefore(div2, op);
    // insertBefore()


    // =======

    // var op = document.querySelector(".p")
    // remove()
    // op.remove();

    // removeChild()
    // document.body.removeChild(op);


    // ============


    // 改
    var op = document.querySelector(".p")
    console.log(op.outerHTML);

    op.outerHTML = "<span>"+ op.innerHTML +"</span>"




</script>
</html>